<template>
  <div class="authorization-page">
    <div class="top-nav">
      <div class="nav-content">
        <img src="@/assets/images/Amazon_logo.svg" alt="Amazon Business" class="logo" />
        <div class="nav-right">
          <el-dropdown trigger="click" @command="handleLanguageChange">
            <div class="language-display">
              <img
                :src="langStore.languageIcon"
                :alt="langStore.languageName"
                class="flag-icon"
              />
              <span class="lang-text">{{ langStore.languageName }}</span>
              <i class="fas fa-caret-down"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="lang in langStore.languageList"
                  :key="lang.id"
                  :command="lang.langKey"
                >
                  <div class="lang-item">
                    <i
                      class="far"
                      :class="{
                          'fa-dot-circle': currentLang === lang.langKey,
                          'fa-circle': currentLang !== lang.langKey
                        }"
                    ></i>
                    <img
                      :src="lang.icon"
                      :alt="lang.countryName"
                      class="flag-icon"
                    />
                    <span>{{ lang.countryName }}</span>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="auth-container">
        <div class="auth-left">
          <div class="auth-left-content">
            <h1 class="auth-title">{{ $t('输入授权码访问亚马逊优惠券') }}</h1>
            <form class="auth-form">
              <div class="form-group">
                <label for="auth-code-input" class="form-label">
                  {{ $t('授权码验证后即可访问全部优惠内容') }}
                </label>
                <input
                  id="auth-code-input"
                  v-model="authCode"
                  class="auth-input"
                  type="text"
                  :placeholder="$t('请输入授权码')"
                  maxlength="20"
                  @keyup.enter="handleSubmit"
                />
                <div class="error-message" v-if="errorMsg">{{ errorMsg }}</div>
              </div>
              <el-button
                class="submit-btn"
                :loading="loading"
                @click="handleSubmit"
              >
                {{ $t('立即验证') }}
              </el-button>
            </form>
            <p class="login-tip">
              {{ $t('没有授权码？') }}
              <a href="#" class="login-link" @click="handleOnlineService">{{ $t('联系客户服务') }}</a>
            </p>
          </div>
        </div>

        <div class="auth-right">
          <div class="right-content">
            <div class="right-text">
              <h2>{{ $t('尊享亚马逊优惠特权') }}</h2>
              <div class="feature-list">
                <div class="feature-item">
                  <div class="icon-wrapper">
                    <img src="/images/authorizationcode/AB-Icon-Business-Discount_White.svg" />
                  </div>
                  <div class="feature-text">
                    <h3>{{ $t('专享优惠折扣') }}</h3>
                    <p>{{ $t('海量商品专属优惠，独家折扣价格，为您节省更多采购成本。') }}</p>
                  </div>
                </div>
                <div class="feature-item">
                  <div class="icon-wrapper">
                    <img src="/images/authorizationcode/AB-Icon-Prime-Business-Prime-Alt_White.svg" />
                  </div>
                  <div class="feature-text">
                    <h3>{{ $t('会员专享特权') }}</h3>
                    <p>{{ $t('享受会员专属优惠券，限时特价商品，以及免费快速配送服务。') }}</p>
                  </div>
                </div>
                <div class="feature-item">
                  <div class="icon-wrapper">
                    <img src="/images/authorizationcode/AB-Icon-Partnership_White.svg" />
                  </div>
                  <div class="feature-text">
                    <h3>{{ $t('限时优惠活动') }}</h3>
                    <p>{{ $t('定期推出限时特惠活动，独家优惠券礼包，助您轻松省钱。') }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-bottom">
              <div class="city-wrapper">
                <img src="/images/authorizationcode/416LUsi8c6L.svg" class="city-image" />
              </div>
              <div class="learn-more-wrapper">
                <a href="#" class="learn-more" @click.prevent="handleLearnMore">
                  {{ $t('了解有关 Amazon优惠券 的更多信息') }}
                  <i class="el-icon-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="footer-content">
<!--        <div class="footer-links">-->
<!--          <router-link to="/account/customer-service" class="a-link-normal">{{ $t('需要帮助') }}?</router-link>-->
<!--          <router-link to="/protocol?key=userContract" class="a-link-normal">{{ $t('用户协议') }}</router-link>-->
<!--          <router-link to="/protocol?key=secrecyContract" class="a-link-normal">{{ $t('隐私协议') }}</router-link>-->
<!--        </div>-->
        <div class="copyright">
          {{ $t('© 1996-2023, Amazon.com Inc. 保留所有权利。') }}
        </div>
      </div>
    </div>
  
  </div>
</template>

<script setup>
import { ref, nextTick,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { memberGetInfo } from '@/api/login'
import useUserStore from "@/store/modules/user";
import useLangStore from "@/store/modules/lang";
import {useI18n} from "vue-i18n";
const { t } = useI18n();
import { ApiConfig } from "@/api/common";

const router = useRouter()
const userStore = useUserStore()
const langStore = useLangStore()
const authCode = ref('')
const loading = ref(false)
const errorMsg = ref('');
const telegramLink724 = ref('');

onMounted(() => {
  ApiConfig({
    key: 'CUSTOMER_SETTING'
  }).then(res => {
    // telegramLink.value = res.data.tgHref
    telegramLink724.value = res.data.href
    
  })
})

// 检查登录状态
const checkLoginStatus = () => {
  if (userStore.isLogin) {
    router.push('/')
  }
}


// 页面加载时检查登录状态
checkLoginStatus()

// 语言切换处理
const currentLang = ref(langStore.language)    // 当前语言
const handleLanguageChange = (lang) => {
  langStore.setLanguage(lang).then(() => {
    currentLang.value = lang
    ElMessage({
      message: t('设置成功'),
      type: 'success',
      duration: 2000
    })

    setTimeout(() => {
      window.location.reload()
    }, 500)
  })
}

const handleLanguageClick = () => {
  router.push('/language')
}

const handleSubmit = async () => {
  if (!authCode.value) {
    errorMsg.value = t('请输入授权码')
    return
  }

  loading.value = true
  errorMsg.value = ''

  try {
    let res = await memberGetInfo({code:authCode.value})
    // await new Promise(resolve => setTimeout(resolve, 1000))

    if (res.code == 200) {
    // if (authCode.value === VALID_AUTH_CODE) {
      sessionStorage.setItem('isAuthorized','true')
      ElMessage.success(t('授权成功'))
      if(userStore.isLogin) {
        router.push('/')
      } else {
        router.push('/login')
      }
    } else {
      errorMsg.value = t('授权码无效，请重新输入')
    }
  } catch (error) {
    errorMsg.value = t('验证失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const handleLearnMore = () => {
  ElMessage.warning(t('请先输入邀请码访问！'))
}

const handleHelp = () => {
  ElMessage.info(t('请联系客户服务！'))
}

// 聊天相关
// const showChatDialog = ref(false)
const messageInput = ref('')
const chatMessagesRef = ref()
const chatMessages = ref([
  {
    id: 1,
    type: 'system',
    content: '客服已接入，请问有什么可以帮您？',
    time: '10:00'
  }
])

// 处理在线客服点击
const handleOnlineService = () => {
  // showChatDialog.value = true
  // telegramLink724
  window.open(telegramLink724.value, '_blank');
}

// 发送消息
const sendMessage = async () => {
  if (!messageInput.value.trim()) return

  // 添加用户消息
  chatMessages.value.push({
    id: Date.now(),
    type: 'user',
    content: messageInput.value,
    time: new Date().toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    })
  })

  messageInput.value = ''

  // 滚动到底部
  await nextTick()
  if (chatMessagesRef.value) {
    chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight
  }

 
}
</script>

<style lang="scss" scoped>
.authorization-page {
  min-height: 100vh;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: #fff;
  overflow: hidden;
  .desktop-nav {
    display: none !important;
  }

  .mobile-nav {
    display: block !important;
  }
}

@media screen and (min-width: 769px) {
  .authorization-page {
    .desktop-nav {
      display: block !important;
    }

    .mobile-nav {
      display: none !important;
    }
  }
}

.top-nav {
  background-color: #232f3e;
  padding: 12px 0;
  height: 56px;

  .nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    height: 32px;
  }

  .nav-right {
    display: flex;
    gap: 24px;
  }
  .language-display {
    display: flex;
    align-items: center;
    //justify-content: space-between;
    cursor: pointer;
    color: $text-white;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 2px;
    min-width: 100px;
    //width: 100px;

    &:hover {
      border-color: $text-white;
    }

    .flag-icon {
      flex-shrink: 0;
      width: 18px;
      height: 14px;
    }

    .lang-text {
      margin: 0 4px;
      font-size: 13px;
      font-weight: 500;
      //width: 24px;
      text-align: center;
      flex-shrink: 0;
    }

    .fa-caret-down {
      font-size: 12px;
      flex-shrink: 0;
    }
  }

  .nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;

    &:hover {
      text-decoration: underline;
    }
  }
}
.lang-item {
  display: flex;
  align-items: center;
  width: 100%;

  .far {
    font-size: 14px;
    width: 16px;
    margin-right: 8px;
    text-align: center;
  }

  .flag-icon {
    margin-right: 8px;
    flex-shrink: 0;
    width: 18px;
    height: 14px;
  }

  span {
    flex: 1;
  }
}

.main-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(56px + 40px);
  overflow: hidden;
}

.auth-container {
  max-width: 866px;
  display: flex;
  background: #fff;
  height: 445px;
}

.auth-left {
  flex: 0 0 433px;
  border: 1px solid #ddd;
  border-right: none;
  height: 445px;

  .auth-left-content {
    height: 100%;
    padding: 32px;
  }
}

.auth-title {
  font-size: 24px;
  color: #0f1111;
  margin: 0 0 24px;
  font-weight: 700;
  line-height: 1.3;
}

.auth-form {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  padding-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #0f1111;
}

.auth-input {
  width: 100%;
  height: 31px;
  padding: 3px 7px;
  font-size: 13px;
  border: 1px solid #a6a6a6;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.07) inset;

  &:hover {
    border-color: #a2a6ac #979aa1 #82858a;
  }

  &:focus {
    border-color: #e77600;
    box-shadow: 0 0 3px 2px rgba(228,121,17,.5);
    outline: none;
  }

  &::placeholder {
    color: #767676;
  }
}

.submit-btn {
  width: 100%;
  height: 31px;
  margin: 18px 0;
  padding: 0 10px;
  background: linear-gradient(to bottom, #f7dfa5, #f0c14b);
  border: 1px solid;
  border-color: #a88734 #9c7e31 #846a29;
  color: #111;
  font-size: 13px;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
  cursor: pointer;

  &:hover {
    background: linear-gradient(to bottom, #f5d78e, #eeb933);
  }

  &:active {
    background: #f0c14b;
    box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
    border-color: #a88734 #9c7e31 #846a29;
  }

  &:focus {
    border-color: #e77600;
    box-shadow: 0 0 3px 2px rgba(228,121,17,.5);
    outline: none;
  }
}

.error-message {
  margin-top: 6px;
  color: #c40000;
  font-size: 12px;
}

.login-tip {
  margin: 16px 0 0;
  font-size: 13px;
  color: #111;

  .login-link {
    color: #0066c0;
    text-decoration: none;
    margin-left: 4px;

    &:hover {
      color: #c45500;
      text-decoration: underline;
    }
  }
}

.auth-right {
  flex: 0 0 433px;
  background-color: #001F3C;
  height: 445px;
  color: #fff;
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
}

.right-content {
  height: 100%;
  position: relative;
}

.right-text {
  padding: 20px;
  height: 185.5px;
  position: relative;
  z-index: 3;

  h2 {
    font-size: 20px;
    margin: 0 0 20px;
    font-weight: 400;
  }

  @media (max-width: 900px) {
    padding: 24px 16px;
    height: auto;
    background: #001F3C;

    h2 {
      text-align: center;
      font-size: 18px;
      margin-bottom: 24px;
    }
  }
}

.feature-list {
  height: calc(100% - 44px);

  @media (max-width: 900px) {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

.feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 0 8px;

  @media (max-width: 900px) {
    margin-bottom: 0;
    padding: 0;
    align-items: center;
  }

  .icon-wrapper {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    margin: 4px 12px 0 0;

    @media (max-width: 900px) {
      width: 40px;
      height: 40px;
      margin: 0 12px 0 0;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .feature-text {
    flex: 1;
    padding-top: 8px;

    @media (max-width: 900px) {
      padding-top: 0;
    }

    h3 {
      font-size: 14px;
      margin: 0 0 4px;
      font-weight: 700;
      line-height: 1.3;
    }

    p {
      font-size: 12px;
      line-height: 1.4;
      margin: 0;
      color: rgba(255, 255, 255, 0.9);

      @media (max-width: 900px) {
        line-height: 1.5;
      }
    }
  }
}

.right-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 259.5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;

  @media (max-width: 900px) {
    position: static;
    height: auto;
  }
}

.city-wrapper {
  width: 100%;
  height: 217.5px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: transparent;
  z-index: 1;

  @media (max-width: 900px) {
    display: none;
  }
}

.learn-more-wrapper {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0E2C49;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;

  @media (max-width: 900px) {
    margin-top: 20px;
  }
}

.learn-more {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;

  .el-icon-arrow-right {
    margin-left: 8px;
    font-size: 12px;
  }

  &:hover {
    text-decoration: underline;
  }
}

.footer {
  background-color: #f8f9fa;
  padding: 16px 0;
  border-top: 1px solid #eee;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.footer-links {
  margin-bottom: 12px;

  a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    margin: 0 12px;

    &:hover {
      color: #232f3e;
      text-decoration: underline;
    }
  }
}

.copyright {
  color: #999;
  font-size: 12px;
}

@media (max-width: 900px) {
  .authorization-page {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    padding: 20px;
    padding-top: 20px;
  }

  .auth-container {
    height: auto;
    flex-direction: column;
    margin: 0;
  }

  .auth-left,
  .auth-right {
    flex: none;
    width: 100%;
    height: auto;
  }

  .auth-left {
    border-right: 1px solid #ddd;
    border-bottom: none;
  }

  .auth-right {
    border-top: none;
  }

  .auth-left-content {
    height: auto !important;
  }

  .auth-right {
    position: static;
  }

  .right-bottom {
    height: auto;
  }

  .right-text {
    height: auto;
    padding: 20px;
  }

  .feature-list {
    height: auto;
  }

  .city-wrapper {
    padding: 16px;
    height: auto;

    .city-image {
      width: 180px;
      height: auto;
    }
  }

  .learn-more-wrapper {
    height: 36px;
  }

  .feature-item {
    .icon-wrapper {
      width: 36px;
      height: 36px;
    }
  }

  .top-nav {
    .nav-content {
      padding: 0 16px;
    }

    .logo {
      height: 28px;
    }
  }
}
.chat-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
  }
}

.chat-container {
  height: 500px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;

  .message {
    margin-bottom: 16px;
    max-width: 80%;

    &.system {
      margin: 0 auto 16px;
      text-align: center;

      .message-content {
        background: #f5f5f5;
        color: #666;
        display: inline-block;
      }
    }

    &.user {
      margin-left: auto;

      .message-content {
        background: #ff9900;
        color: white;
      }
    }

    &.service {
      margin-right: auto;

      .message-content {
        background: #f0f2f5;
      }
    }

    .message-content {
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
      line-height: 1.4;
    }

    .message-time {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
      text-align: right;
    }
  }
}
</style>
